@ds-kit/button

---

title: "Button" slug: "/packages/button" category: "control" componentNames:

• "Button"

---

Button

Buttons allow users to take actions, and make choices. They are a basic interactive building block of ds-kit UIs.

To see buttons in action, check out the input patterns, or the newsletter patterns.

To get started with buttons, import a button from @ds-kit/button.

import Button from "@ds-kit/button"

Simple example

A basic example of a button can look like this:

<Button variant="primary">{"Button"}</Button>

Button variants

There are a few button variants available within ds-kit. Use the variant prop to select one of four basic variants (ghost, primary, success, and danger).

<>
  <Button mr={2} variant="ghost">
    Ghost
  </Button>
  <Button mr={2} variant="primary">
    Primary
  </Button>
  <Button mr={2} variant="success">
    Success
  </Button>
  <Button mr={2} variant="danger">
    Danger
  </Button>
</>

Button sizes

Ds-kit buttons come in three sizes: sm, md, and lg. Note the use of mr here to set a margin-right in order to add some space between the buttons.

<>
  <Button size="sm" variant="primary" mr={2}>
    Small
  </Button>
  <Button size="md" variant="primary" mr={2}>
    Medium
  </Button>
  <Button size="lg" variant="primary" mr={2}>
    Large
  </Button>
</>

Button options

In addition to size and color, you can also make use of some options to customise the buttons. By default buttons are rounded, but you can also use the pill prop, to make them appear as pills. To raise a button, add the raised prop.

<>
  <Button variant="primary" raised>
    Raised Button
  </Button>
  <Button variant="primary" pill>
    Pill Button
  </Button>
</>

Circle buttons

You can use the circle prop to define a circular button. This is useful buttons with only icons.

<>
  <Button variant="primary" circle>
    <svg viewBox="0 0 20 20" width="1.5rem" height="1.5rem" />
  </Button>
  <Button variant="ghost" circle>
    C
  </Button>
</>

Buttons with icons

Buttons can also have icons in addition to or instead of text.

<>
  <Button variant="primary" mr={2}>
    <svg
      width="24px"
      height="24px"
      viewBox="0 0 24 24"
      style={{ marginRight: "0.5rem" }}
    >
      <polygon
        fill="#fff"
        points="16.59 8.59 18 10 12 16 6 10 7.41 8.59 12 13.17"
      />
    </svg>
    Icon Button
  </Button>
  <Button variant="ghost" mr={2}>
    <svg
      width="24px"
      height="24px"
      viewBox="0 0 24 24"
      style={{ marginRight: "0.5rem" }}
    >
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <g transform="translate(4, 4)" stroke="#202021" strokeWidth="2">
          <polyline strokeLinecap="square" points="8 4 8 8 11.2 11.2" />
          <path d="M0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 C4.88,0 2.16,1.76 0.88,4.4" />
          <polyline
            strokeLinecap="square"
            points="0.2112 0.456 0.88 4.4 4.824 3.7312"
          />
        </g>
      </g>
    </svg>
    Another Button
  </Button>
  <Button variant="primary" circle mr={2}>
    <svg width="24px" height="24px" viewBox="0 0 24 24">
      <polygon
        fill="#fff"
        points="16.59 8.59 18 10 12 16 6 10 7.41 8.59 12 13.17"
      />
    </svg>
  </Button>
  <Button variant="ghost" circle mr={2}>
    <svg width="24px" height="24px" viewBox="0 0 24 24">
      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
        <path
          d="M22,5.91666667 C21.25,6.25 20.5,6.5 19.6666667,6.58333333 C20.5,6.08333333 21.1666667,5.25 21.5,4.33333333 C20.6666667,4.83333333 19.8333333,5.16666667 18.9166667,5.33333333 C18.1666667,4.5 17.0833333,4 15.9166667,4 C13.6666667,4 11.8333333,5.83333333 11.8333333,8.08333333 C11.8333333,8.41666667 11.8333333,8.75 11.9166667,9 C8.41666667,8.83333333 5.41666667,7.16666667 3.41666667,4.66666667 C3,5.33333333 2.83333333,6 2.83333333,6.75 C2.83333333,8.16666667 3.58333333,9.41666667 4.66666667,10.1666667 C4,10.1666667 3.33333333,10 2.83333333,9.66666667 C2.83333333,9.66666667 2.83333333,9.66666667 2.83333333,9.75 C2.83333333,11.75 4.25,13.4166667 6.08333333,13.75 C5.75,13.8333333 5.41666667,13.9166667 5,13.9166667 C4.75,13.9166667 4.5,13.9166667 4.25,13.8333333 C4.75,15.5 6.25,16.6666667 8.08333333,16.6666667 C6.66666667,17.75 4.91666667,18.4166667 3,18.4166667 C2.66666667,18.4166667 2.33333333,18.4166667 2,18.3333333 C3.83333333,19.5 6,20.1666667 8.25,20.1666667 C15.8333333,20.1666667 19.9166667,13.9166667 19.9166667,8.5 C19.9166667,8.33333333 19.9166667,8.16666667 19.9166667,8 C20.75,7.41666667 21.4166667,6.66666667 22,5.91666667 Z"
          fill="#202021"
          fillRule="nonzero"
        />
      </g>
    </svg>
  </Button>
</>

Custom buttons

You can also fully customise your buttons. There are various options available to determine the size and shape of your buttons. These customisations are meant to be used for special cases, where the default shapes are insufficient.

Colors

Using the bg and color props, you can set custom colors for your buttons.

<>
  <Button bg="yellow.400" hoverBg="yellow.500">
    Custom Background
  </Button>
  <Button color="orange.400" hoverBg="orange.400" hoverColor="white">
    Custom Color
  </Button>
</>

Size

Using the height prop, you can modify the size of your button.

<Button variant="primary" height="4.5rem">
  Huge Button
</Button>

Space

Using the px prop, you can modify the horizontal padding in your buttons.

<Button variant="primary" px="5rem">
  Wide Button
</Button>

Outline

Using the outlined prop, you can determine whether a button should be filled or outlined.

<Button color="primary" outlined>
  {"Outlined button"}
</Button>